AdvancedListSearch
Description
Adds the ability to search a List control with a highly-configurable interface that lets the user add and remove fields from the search criteria.
Discussion
The AdvancedListSearch control can be used to search a List control based on a SQL database. Search fields are added on-demand with options to customize the of control -- e.g. textbox, dropdown list, radio buttons, date range, etc -- shown to the user. Searches can also be saved and loaded by enabling the application Repository in the Web Project Properties.
Configuring the AdvancedListSearch Control
The configuration dialog for the AdvancedListSearch control is shown below. The left hand list shows the fields that the user can select from when adding a new field to the search at run-time. You can add new fields to this list by clicking on the Add new search field... button. The properties for the selected item will be shown to the right.
When you click on the Add Field button a dialog is shown that allows you to pick one of the available fields in the List control.
For each field you select, you must also select the corresponding control type for that field.
For example, if you pick a logical field, you will likely want to select the switch control for that field. On the other hand, say you pick a field called Lastname, you might want to select the suggest control for that field. This will display an auto-suggest list as the user starts typing values into the search field.
You can customize all of the icons and prompts shown in the Auto Suggest control. To do so, click the Customize Buttons and Strings for the Advanced Search Control button. This will display the dialog shown below. You can use language and text dictionary tags in the strings (e.g. <a5:r>...</a5:r> or <a5:t>..</a5:t> )
You can customize certain aspects of the Advanced Search control by clicking the Customize Search Options button. This will display the dialog shown below:
You can enable/disable the ability to save and load previously defined advance searches. You can also specify if debugging information should be shown. If you turn on debugging information, the WHERE clause computed from the search definition is shown, as well as the argument values for the arguments referenced in the WHERE clause.
If you turn on debugging information, you must specify where this information should be shown. In the case of a UX component, place a Placeholder control on the UX. The dialog will prompt for the name of the placeholder.
The Unique key property is shown if either the load or save query options is enabled. This property is added to the name of the saved query in the Repository table where queries are saved (see below for more information on Loading and Saving queries). This property allows you to ensure that when you click the Load Query button, only saved queries that match the Unique key are shown.
Loading and Saving Queries
In order to save queries you must define a Repository table in the Project Properties dialog. To open the Project Properties dialog, click the Project Properties button in the Web Control Panel.
You can define the connection string to the database where the Repository table will be stored. You can link to an existing table or create a new table. Click the smart field for any of the properties to open a builder.
Configuring the UX to Show Debugging Information
When you run a query in the Advanced Search control you can display the WHERE clause that Alpha Anywhere computed from your query definition.
To turn on debugging information check the Display debugging information property in the Customize Search Options dialog.
You can specify a Placeholder control in the UX Component where the debugging information will be shown.
Properties
You can configure the label and control type for the fields added to the AdvancedListSearch. Additional properties for configuring each item depends on the Control type. The control type is the control shown for the search field:
- Type
- Description
- textbox
A textbox. The user types the search criteria into the textbox.
- datepicker
A textbox with a calendar that can be used to select a date.
- daterangepicker
Similar to the datepicker. Used for selecting a date range. User is shown two calendars to select the start and end dates.
- step
A textbox control with increment and decrement buttons. The value can be entered manually or modified by clicking the buttons.
- switch
A switch control. Commonly used with logical fields or fields that only have two states (such as "on" and "off".)
- combolist
A textbox with a dropdown picklist of choices. The user can either type to select a value or choose one from the picklist.
- buttonlist
Displays a set of choices as a button list.
- suggest
A textbox that displays an auto-suggest list as the user types into the search field.
The combolist, buttonlist, and suggest control types can be statically or dynamically populated. If the control will be dynamically populated, a callback to the server is made at run-time to retrieve the list of options from the SQL data source.
Inserting an Add-in Control
Add-in Controls are inserted using the More... option in the Data Controls section of the UX Builder.
Select the control you would like to add and click OK.
In addition to the controls that ship with Alpha Anywhere, you can also create your own add-in controls. See How to Create Add-in Controls to learn more.
Methods
The AdvancedListSearch control is a Data control and can be used with the same methods as other Data controls, including the getValue() and setValue() methods. These methods can be used to get or set the query definition for the control.
var search = {dialog.object}.getValue('ADVANCEDSEARCH1');
alert(search);Videos
Using the AdvancedListSearch Control to Search in a List Based on SQL Database
For UX Components that contain List controls that are based on SQL databases, the Advanced Search control exposes powerful features for users to search for specific records in a List. The Advanced Search Control allows users to define complex queries and to save these queries to a repository for future reuse.
In this video we show how the Advanced Search Control is added to a UX component and how it is configured.
See Also